<%--
  Created by IntelliJ IDEA.
  User: 懒瑶瑶
  Date: 2022/5/8
  Time: 20:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>员工列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script>
        layui.use(['table','util','jquery','layer','form'],function () {
            var table = layui.table,util=layui.util,$=layui.jquery,layer=layui.layer,form=layui.form;
            form.verify({
                num_sz:[
                    /(^$)|^\d+$/,
                    '只能填写数字'
                ],
            });
            //监听工具栏的按钮  修改，删除
            table.on('tool(demo)',function (res) {
                var row = res.data; //获取当前数据（点哪一行就是哪一行）
                var event = res.event;//获取点的是哪个按钮
                // alert(event);
                var empId = row.empId;
                if(event=='del'){
                    //把id传到后台去删除
                    // alert(row.empId); 弹出要删除的ID
                    layer.confirm('是否删除该员工？',{
                        btn:['确定','取消']
                    },function () {//确定的回调函数
                        // alert(row.empId);测试是否进入
                        $.post("${pageContext.request.contextPath}/emp/delemp",{empId:empId},function (data) {
                            layer.msg(data.msg);  //使用消息层 显示删除结果
                            //重新加载table
                            table.reload('demo',{
                                url:"${pageContext.request.contextPath}/emp/emplist"
                            });
                        },"json");
                    });
                }else if(event=='edit'){//如果是修改
                    layer.open({
                        type:2,
                        fix:false,
                        maxmin:true,
                        offset:'10px',
                        shadeClose:true,
                        shade:0.4,
                        area:['600px','520px'],
                        title:["修改员工",'font-size:18px; color:orange;'],
                        content:'${pageContext.request.contextPath}/emp/toupdemp/'+empId
                    });
                }else if(event=='czmm'){//如果是重置密码
                    layer.confirm('是否重置该登录密码？', {
                        btn: ['确定', '取消']
                    },function () {//确定的回调函数
                        // alert(row.empId);测试是否进入
                        $.post("${pageContext.request.contextPath}/emp/empczmm",{empId:empId},function (data) {
                            layer.msg(data.msg);  //使用消息层 显示删除结果
                            //重新加载table
                            table.reload('demo',{
                                url:"${pageContext.request.contextPath}/emp/emplist"
                            });
                        },"json");
                    });
                }else if(event=='xiangqing'){//如果是更多资料
                    layer.open({
                        type:2,
                        fix:false,
                        maxmin:true,
                        offset:'10px',
                        shadeClose:true,
                        shade:0.4,
                        area:['1200px','520px'],
                        success: function(layero,index){
                            //在回调方法中的第2个参数“index”表示的是当前弹窗的索引。
                            //通过layer.full方法将窗口放大。
                            layer.full(index);
                        },
                        title:["更多资料",'font-size:18px; color:orange;'],
                        content:'${pageContext.request.contextPath}/emp/toemplist/'+empId
                    });
                }
            });

            //监听添加按钮
            $("#add-btn").click(function () {
                layer.open({
                    type:2,
                    fix:false,
                    maxmin:true,
                    offset:'5px',
                    shadeClose:true,
                    shade:0.4,
                    area:['600px','520px'],
                    title:["新增员工",'font-size:18px; color:orange;'],
                    content:'${pageContext.request.contextPath}/emp/toaddemp'
                });

            });

            //监听form表单数据
            form.on('submit(search-btn)',function (d) {
                var empId = $("#empId").val();
                var empName = $("#empName").val();
                var depName = $("#depName").val();
                var phone = $("#phone").val();
                var postName = $("#postName").val();
                var sex = $("#sex").val();

                // alert(empId + empName);
                table.reload('demo',{//指定条件重载table
                    page: {curr:1},
                    where:{ //条件
                        empId:empId,
                        empName:empName,
                        depName:depName,
                        phone:phone,
                        postName:postName,
                        sex:sex
                    }
                });
            });
            //监听form表单提交 刷新按钮
            form.on('submit(shuaxin-btn)',function (d) {
                location.reload("demo");//重新加载父页面表格
            });
        });
    </script>
</head>
<body><br/>


<div>
    <form class="layui-form" action="${pageContext.request.contextPath}">
        <div class="layui-inline" style="font-weight:bold;font-size: 16px">编号：</div>
        <div class="layui-inline" style="width: 80px">
            <input type="text" name="empId" id="empId" class="layui-input"  lay-verify="num_sz"/>
        </div>
        <div class="layui-inline" style="font-weight:bold;font-size: 16px">姓名：</div>
        <div class="layui-inline" style="width: 100px">
            <input type="text" name="empName" id="empName" class="layui-input"/>
        </div>
        <div class="layui-inline" style="font-weight:bold;font-size: 16px">性别：</div>
        <div class="layui-input-inline" style="width: 100px">
            <select name="sex" id="sex">
                <option value="">请选择</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class="layui-inline" style="font-weight:bold;font-size: 16px">部门：</div>
        <div class="layui-inline" style="width: 130px">
<%--            <input type="text" name="depId" id="depId" class="layui-input"/>--%>
            <div class="layui-input-inline">
                <select name="depName" id="depName">
                    <option value="">请选择部门</option>
                    <c:forEach items="${dlist}" var="s">

                        <option value="${s.depName}">${s.depName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="font-weight:bold;font-size: 16px">职务：</div>
        <div class="layui-inline" style="width: 130px">
            <%--            <input type="text" name="depId" id="depId" class="layui-input"/>--%>
            <div class="layui-input-inline">
                <select name="postName" id="postName">
                    <option value="">请选择职务</option>
                    <c:forEach items="${plist}" var="s">
                        <option value="${s.postName}">${s.postName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="font-weight:bold;font-size: 16px">电话：</div>
        <div class="layui-inline" style="width: 130px">
            <input type="text" name="phone" id="phone" class="layui-input"/>
        </div>
        <a class="layui-btn layui-btn-normal layui-icon layui-icon-search" lay-filter="search-btn" lay-submit lay-size="sm">搜索</a>
        <a class="layui-btn layui-btn-warm layui-icon layui-icon-refresh" lay-filter="shuaxin-btn" lay-submit lay-size="sm">刷新</a>
        <a class="layui-btn layui-icon layui-icon-add-1" id="add-btn"  lay-size="sm">新增员工</a>
    </form>
</div>
<table class="layui-table" id="demo" lay-filter="demo" lay-size="sm"
       lay-data="{url:'${pageContext.request.contextPath}/emp/emplist',page:true,id:'demo'}">
    <thead>
        <tr>
            <th lay-data="{field:'empId',sort:true,align:'center',width:70}">编号</th>
            <th lay-data="{field:'empName',sort:true,align:'center'}">员工姓名</th>
            <th lay-data="{field:'depName',sort:true,align:'center',width:90}">部门</th>
            <th lay-data="{field:'postName',sort:true,align:'center'}">职务</th>
            <th lay-data="{field:'personnel',sort:true,align:'center',templet:function (d) {
                            var zid=d.personnel;//取出每一个数据
                                if(zid==1){
                                    return '人事部'
                                }else if(zid==2){
                                    return '教职工'
                                }
                            }}">人事/教职工</th>

            <th lay-data="{field:'sex',sort:true,width:80,align:'center'}">性别</th>
            <th lay-data="{field:'phone',sort:true,align:'center'}">电话号码</th>
            <th lay-data="{field:'address',sort:true,align:'center'}">家庭地址</th>
            <th lay-data="{field:'status',sort:true,width:90,align:'center',templet:function (d) {
                            var zid=d.status;//取出每一个数据
                                if(zid==1){
                                    return '启用'
                                }else if(zid==2){
                                    return '禁用'
                                }
                            }}">状态</th>
            <th lay-data="{toolbar:'#xiangqing',width:100,align:'center',fixed:'right'}">更多资料</th>
            <th lay-data="{toolbar:'#czmm',width:100,align:'center',fixed:'right'}">重置密码</th>
            <th lay-data="{toolbar:'#tools',width:150,align:'center',fixed:'right'}">操作</th>
        </tr>
    </thead>
</table>
<script type="text/html" id="xiangqing">
    <a 	class="layui-btn layui-btn-xs layui-btn-primary layui-border-orange" lay-event="xiangqing">更多资料</a>
</script>
<script type="text/html" id="czmm">
    <a 	class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue" lay-event="czmm">重置密码</a>
</script>
<script type="text/html" id="tools">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
</body>
</html>
